<template>
  <van-nav-bar left-text="返回" left-arrow @click-left="onClickLeft" />
  <div class="container">
    <div class="box"></div>
    <van-cell title="记录档案"> {{ name }}({{ relation }})</van-cell>
    <div class="box"></div>
    <div>
      <!--时间-->
      <van-cell title="测量时间" is-link value="admin">
        {{ new Date().toLocaleString() }}
      </van-cell>
    </div>
    <!--体重-->
    <van-cell title="体重" is-link v-model="weight">
      {{ weight }}
    </van-cell>
    <!--身高-->
    <van-cell title="身高" is-link v-model="height">
      {{ height }}
    </van-cell>
  </div>
  <div class="aed">
    <button
      style="
        width: 100%;
        background: greenyellow;
        color: antiquewhite;
        border: none;
        height: 60px;
        text-align: center;
        margin-top: 40px;
      "
      @click="gheavy()"
    >
      保存
    </button>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
// 保存数据到本地存储
const name = ref(localStorage.getItem('name'))
const relation = ref(localStorage.getItem('relation'))
const weight = ref(localStorage.getItem('weight'))
const height = ref(localStorage.getItem('height'))
const gheavy = () => {
  router.push('/heavy')
}
const onClickLeft = () => {
  router.go(-1)
}
</script>
<style>
.container {
  width: 100%;
  height: 90%;
  background-color: #f2f2f2;
  line-height: 50px;
  overflow: hidden;
}
.aed {
  width: 100%;
  height: 80px;
  background-color: #f2f2f2;
  position: absolute;
  bottom: 0px;
  left: 0px;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
}
.box {
  width: 100%;
  height: 15px;
  background: #f2f2f2;
}
</style>
